<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vuex</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/vuex.js"></script>
</head>
<body>
<div id="app">
    <p>{{count}}
        <button @click="inc">+</button>
        <button @click="dec">-</button>
        <button @click="inc10">+10</button>
    </p>
</div>
Action的意义：mutation 必须同步执行这个限制 Action 就不受约束 <br>
1.Action 提交的是 mutation，而不是直接变更状态。<br>
2.Action 可以包含任意异步操作。<br>
3.Action 通过 store.dispatch 方法触发：<br>
4.Action 支持同样的载荷方式和对象方式进行分发：
<script>

    const store = new Vuex.Store({
                state: {
                    count: 0
                },
                mutations: {
                    inc:function(state){ state.count++},
                    dec:function(state){
                        console.log("我来自mutations")
                        state.count--
                    },
                    inc10:function(state,payload){
                        state.count+=payload.amount
                    }
                 },
        actions: {
            increment (context) {
                console.log("我来自action")
                context.commit('inc')
            },

            increment10 (context, payload) {
                console.log("我来自action+10")
                console.log(payload.amount)
                context.commit('inc10',payload)
            }

        }
    })

    const app = new Vue({
        el: '#app',
        computed: {
            count () {
                return store.state.count
            }
        },
        methods: {
            inc () {
                store.dispatch('increment')
            },
            dec () {
                store.commit('dec')
            },

            inc10 () {

//            以何载方式分发
//                store.dispatch('increment10',{amount:10})

//            // 以对象形式分发
               store.dispatch({type: 'increment10',amount: 10})

      }


        }
    })
</script>
</body>
</html>
